<!--  -->
<template>
  <div v-if="index % 2 === 0">
    <b-container>
      <b-row>
        <b-col cols="12" md="4">
          <img :src="source" alt="" class="w-100">
        </b-col>
        <b-col>
          <div class="text">
            <h2>{{title}}
              <small class="gray">「{{small}}」</small>
            </h2>
            <p class="ft14 gray">{{text}}</p>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
  <div v-else class="bg-gray">
    <b-container>
      <b-row>
        <b-col>
          <div class="text">
            <h2>{{title}}
              <small class="gray">「{{small}}」</small>
            </h2>
            <p class="ft14 gray">{{text}}</p>
          </div>
        </b-col>
        <b-col cols="12" md="4">
          <img :src="source" alt="" class="w-100">
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  components: {},

  props: {
    title: {
      type: String
    },
    small: {
      type: String
    },
    text: {
      type: String
    },
    source: {
      type: String
    },
    index: {
      type: Number
    }
  },

  data () {
    return {
    }
  },

  computed: {},

  methods: {}
}

</script>
<style lang='less' scoped>
  .container {
    padding: 5rem;
    @media @max768 {
      padding: 2rem;
    }
  }
  .text {
    padding-left: 3rem;
    padding-top: 2rem;
    .t-l;
    @media @max768 {
      padding-left: 0;
      padding-top: 1rem;
    }
  }
  .bg-gray {
    background: #f3f5f7;
  }
</style>
